<template>
  <!-- 头部 -->
  <div>
    <header class="fixed w100pc">
      <router-link to="/my" class="h45 bg-fff flex fcc rel">
        <i class="left-10 abs ml-10 iconfont iconleft" height="22px" width="15px"></i>
        <span>我的订单</span>
      </router-link>
    </header>
    <!-- 名字 -->
    <van-list
      class="ul"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <li v-for="(inem,index) in list" :key="index">
        <p class="sss"></p>
        <div class="h45 bg-fff flex fcc jc-sb pl-15 pr-25 xian">
          <b>{{inem.name}}</b>
          <span class="payColour">待支付</span>
        </div>

        <!-- 内容主体 -->
        <main class="flex bg-fff f14">
          <div class>
            <img v-lazy="`https://img.villaday.com${inem.imageUrl}`" height="85px">
          </div>
          <div class="day pl-10">
            <p class="colours">
              入住日期:
              <span class="pl-20 colourss">2019-6-5</span>
            </p>
            <p class="colours">
              退房日期:
              <span class="pl-20 colourss">2019-6-5</span>
            </p>
            <p class="colours">
              下单日期:
              <span class="pl-20 colourss">2019-6-5</span>
            </p>
            <p class="colours">
              订单总价:
              <span class="pl-20 colourss">￥{{inem.totalMoney}}</span>
            </p>
          </div>
        </main>

        <!-- 底部 -->
        <footer class="flex aic jc-sa bg-fff f14 pl-15 w100pc pr-15 bg-fff">
          <p @click="change(index)">订单详情</p>
          <p>联系客服</p>
          <p>取消订单</p>
          <div @click="pay(inem.orderId)">
            <p class="pj">去支付</p>
          </div>
        </footer>
      </li>
    </van-list>
  </div>
</template>

<script>
import { log } from "util";
export default {
  data() {
    return {
      list: [],
      loading: false,
      pageNum: 1,
      pageSize: 5,
      totalPge: "",
      finished: false
    };
  },
  methods: {
    change(index) {
      let { orderId, houseId } = this.list[index];
      this.$router.push({
        path: "/order/orderDetail",
        query: {
          orderId
        }
      });
    },
    //上拉加载 分页
    onLoad() {
      setTimeout(() => {
        let url = "/order/getList";
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        this.$axios
          .post(url, data)
          .then(res => {
            // console.log(res, "res");
            this.totalPge = res.totalPge;
            res.list.forEach(lists => {
              this.list.push(lists);
            });
            // 数据全部加载完成
            if (res.list <= this.pageSize) {
              this.finished = true;
            }
          })
          .then(() => {
            // console.log(this.pageNum);

            this.pageNum++; //页数增替
            // console.log(this.list);

            // 加载状态结束
            this.loading = false;
          });
      }, 800);
    },

    // 立即支付
    pay(orderId) {
      this.$router.push({
        path: "/order/pay",
        query: {
          preOrderId: orderId,
          shopName: "海边民宿",
          payType: "微信支付"
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/orderList.less";
</style>

